<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<script lang="tsx" setup>
import { ref, toRefs } from 'vue';
import { useDialog, useMessage } from 'naive-ui';
import { clean, getPageList } from '@/service/api/log/loginLog';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { useAppStore } from '@/store/modules/app';
import { $t } from '@/locales';
import { useDict } from '@/utils/dict';
import SvgIcon from '@/components/custom/svg-icon.vue';
import Dict from '@/components/custom/dict-tag.vue';
import DictTag from '@/components/custom/dict-tag.vue';
import type { Log, LoginVo } from '@/service//types/log';
import PieChart from './components/pie-chart.vue';
import BarChart from './components/bar-chart.vue';
const { sys_device_type } = toRefs<any>(useDict('sys_device_type'));
const message = useMessage();
const dialog = useDialog();
const appStore = useAppStore();
const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: getPageList,
  showTotal: true,
  apiParams: {
    pageNum: 1,
    pageSize: 10,
    postName: null,
    postCode: null,
    deptId: null,
    status: 0
  },
  columns: () => [
    {
      type: 'selection',
      align: 'center',
      width: 48
    },
    {
      key: 'userName',
      title: '用户名称',
      align: 'center'
    },
    {
      key: 'clientKey',
      title: '设备类型',
      align: 'center',
      render: (row: LoginVo) => <DictTag dicts={sys_device_type.value} type="text" value={row.clientKey} />
    },
    {
      key: 'browser',
      title: '浏览器',
      align: 'center'
    },
    {
      key: 'ipaddr',
      title: '登录IP',
      align: 'center'
    },
    {
      key: 'loginLocation',
      title: '登录地点',
      align: 'center'
    },
    {
      key: 'os',
      title: '操作系统',
      align: 'center',
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'msg',
      title: '描述',
      align: 'center',
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'loginTime',
      title: '登录时间',
      align: 'center'
    }
  ]
});
const {
  drawerVisible,
  operateType,
  editingData,
  handleAdd,
  handleEdit,
  checkedRowKeys,
  onBatchDeleted,
  onDeleted
  // closeDrawer
} = useTableOperate(data, getData);
const handleTabChange = (value: number) => {
  // console.log(value);
  searchParams.status = value;
  getData();
};
const options = ref([
  {
    label: '保留近1个月',
    key: '0'
  },
  {
    label: '保留近三个月',
    key: '1'
  },
  {
    label: '保留近一年',
    key: '2'
  },
  {
    label: '保留1万条数据',
    key: '3'
  },
  {
    label: '清空所有',
    key: '4'
  }
]);
const handleClean = (key: string | number) => {
  console.log(key);
  // clean(key);
  dialog.warning({
    title: '警告',
    content: '你确定执行当前操作吗！',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const loadingExample = message.loading('正在处理，请稍等');
      const { error, data } = await clean(key);
      if (!error) {
        message.success(data.msg);
      }
      loadingExample.destroy();
      getData();
    },
    onNegativeClick: () => {
      message.info('已经取消删除');
    }
  });
};
</script>

<template>
  <div class="h-100% min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NGrid y-gap="12" x-gap="12" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:16">
        <BarChart />
      </NGi>
      <NGi span="24 s:24 m:8">
        <PieChart />
      </NGi>
      <NGi span="24 s:24 m:24">
        <div class="h-100% min-h-430px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
          <NCard :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
            <template #header>
              <NTabs type="bar" :on-update:value="handleTabChange">
                <NTab name="0">登录成功</NTab>
                <NTab name="1">登录失败</NTab>
              </NTabs>
            </template>
            <template #header-extra>
              <TableHeaderOperation
                v-model:columns="columnChecks"
                :disabled-delete="checkedRowKeys.length === 0"
                :loading="loading"
                @refresh="getData"
              >
                <template #default>
                  <NDropdown :options="options" @select="handleClean">
                    <NButton size="small" ghost type="error">
                      <div class="flex flex-row flex-gap-2">
                        <div>清理日志</div>
                        <SvgIcon icon="solar:alt-arrow-down-linear" />
                      </div>
                    </NButton>
                  </NDropdown>
                </template>
              </TableHeaderOperation>
            </template>
            <NDataTable
              v-model:checked-row-keys="checkedRowKeys"
              :columns="columns"
              :data="data"
              size="small"
              :flex-height="!appStore.isMobile"
              :scroll-x="962"
              :loading="loading"
              remote
              :row-key="row => row.infoId"
              :pagination="mobilePagination"
              class="sm:h-full"
            >
              <template #empty>
                <Empty />
              </template>
            </NDataTable>
          </NCard>
        </div>
      </NGi>
    </NGrid>
  </div>
</template>

<style lang="scss" scoped></style>
